<!-- 支付 -->
<template>
  <div class="">
    <div class="tip">
      <a>会员配置：</a>
      设置本机构对外展示的资源及解锁方式
    </div>
    <s-table ref="table" size="default" rowKey="id, enabled, title" :columns="columns" :data="loadData"
      :rowSelection="null" :showPagination="false" listField="orgCooperationResourceConfigInfo">
      <!-- 对外合作开关 -->
      <template slot="isOpen" slot-scope="text, record, index">
        <a-switch :defaultChecked="record.isOpen === 0"
          @change="(checked) => handleChangeIsOpen(checked, record, index)" />
      </template>

      <!-- 解锁审核开关 -->
      <template slot="isAudit" slot-scope="text, record, index">
        <a-select v-model="record.isAudit" style="width: 120px" @change="handleChangeField(record, index)">
          <a-select-option :value="1">审核</a-select-option>
          <a-select-option :value="0">无需审核</a-select-option>
        </a-select>
      </template>

      <!-- 审核/进群人员设置 -->
      <template slot="managerList" slot-scope="text, record">
        <a-select class="select-user" :value="text | getManagerList" mode="multiple" style="width: 220px"
          placeholder="请选择" @select="(e) => handleSelect(e, record.projectType)"
          @deselect="(e) => handleDeselect(e, record.managerList)">
          <a-select-option v-for="item in user_list" :key="item.userId">{{ item.userName }}</a-select-option>
        </a-select>
      </template>

      <!-- 付费解锁配置 -->
      <template slot="price" slot-scope="text, record, index">
        <div class="table-item">
          <span class="label">解锁联系方式（￥）</span>
          <a-input-number v-model="record.price1" :min="0" :max="100" placeholder="请输入" class="input"
            @change="handleChangeField(record, index)" />
          <!-- <EditableCell :text="record.price1" width="140px" @change="onCellChange(record, $event, index, 'price1')" /> -->
        </div>
        <div class="table-item">
          <span class="label">秘书处联络（￥）</span>
          <a-input-number v-model="record.price2" :min="0" :max="100" placeholder="请输入" class="input"
            @change="handleChangeField(record, index)" />
          <!-- <EditableCell :text="record.price2" width="140px" @change="onCellChange(record, $event, index, 'price2')" /> -->
        </div>
      </template>

      <!-- 解锁佣金比例 -->
      <template slot="percent" slot-scope="text, record, index">
        <div class="inline">
          <a-input-number v-model="record.percent" :min="0" :max="100" placeholder="请输入" class="input"
            @change="handleChangeField(record, index)" />
          <span>%</span>
        </div>
      </template>

      <!-- 佣金 -->
      <template slot="compute" slot-scope="text, record">
        <div class="table-item">
          <span class="label">解锁联系方式佣金（￥）</span>
          <span>{{ record.pricePeopleCompute }}</span>
          <!-- <EditableCell :text="record.priceContactCompute" width="140px" /> -->
        </div>
        <div class="table-item">
          <span class="label">秘书处联络佣金（￥）</span>
          <span>{{ record.priceContactCompute }}</span>
          <!-- <EditableCell :text="record.pricePeopleCompute" width="140px" /> -->
        </div>
      </template>
    </s-table>

    <a-button type="primary" @click="handleTenantSave" style="margin-top: 20px">保存</a-button>
  </div>
</template>

<script>
import { STable } from '@/components'
import { OrgPermissionInfo, TenantSave } from '@/api/system/base'
import EditableCell from '@/components/EditableCell'
import { getUserList } from '@/api/system/system'
import { ManagerAdd, ManagerDel } from '@/api/business/source'
import { Modal } from 'ant-design-vue'
export default {
  components: {
    STable,
    EditableCell,
  },
  data() {
    return {
      columns: [
        {
          title: '资源',
          dataIndex: 'projectName',
          ellipsis: true,
          width: 80,
        },
        {
          title: '对外合作开关',
          dataIndex: 'isOpen',
          width: 100,
          scopedSlots: { customRender: 'isOpen' },
        },
        {
          title: '解锁审核开关',
          dataIndex: 'isAudit',
          width: 120,
          scopedSlots: { customRender: 'isAudit' },
        },
        {
          title: '会外申请审核人',
          dataIndex: 'managerList',
          width: 200,
          scopedSlots: { customRender: 'managerList' },
        },
        {
          title: '付费解锁配置',
          width: 150,
          scopedSlots: { customRender: 'price' },
        },
        {
          title: '解锁佣金比例',
          dataIndex: 'percent',
          width: 100,
          scopedSlots: { customRender: 'percent' },
        },
        {
          title: '佣金',
          width: 150,
          scopedSlots: { customRender: 'compute' },
        },
      ],
      dataSource: [],
      loadData: async () => {
        this.listLoading = true
        return OrgPermissionInfo()
          .then((res) => {
            this.listLoading = false
            if (res.code === 0) {
              this.dataSource = res.data.orgCooperationResourceConfigInfo || []
              return res
            } else {
              this.$message.error(res.msg)
            }
          })
          .catch((err) => {
            this.listLoading = false
            this.$message.error(err.msg)
          })
      },
      user_list: [],
    }
  },
  filters: {
    getManagerList(e) {
      return (e || []).map((item) => item.systemId)
    },
  },

  watch: {},
  methods: {
    handleChangeField(record, index) {
      this.dataSource.splice(index, 1, { ...record })
    },
    handleChangeIsOpen(checked, record, index) {
      record.isOpen = checked ? 0 : 1
      this.dataSource.splice(index, 1, { ...record })
    },
    async GetUserList() {
      let res = await getUserList()
      this.user_list = res.rows || []
    },
    async handleSelect(val, projectType) {
      let item = this.user_list.find((f) => f.userId === val) || {}
      let { code, msg } = await ManagerAdd({
        systemId: val,
        systemName: item.userName,
        systemPhone: item.phonenumber,
        projectType,
        type: 1, //会外
      })
      this.$message[code === 0 ? 'success' : 'error'](msg)
      if (code != 0) this.userIds.pop()
      this.$refs.table.refresh()
      // this.getManagerList()
    },
    async handleDeselect(val, managerList) {
      let item = (managerList || []).find((f) => f.systemId === val) || {}
      let { code, msg } = await ManagerDel(item.id)
      this.$message[code === 0 ? 'success' : 'error'](msg)
      // this.getManagerList()
      this.$refs.table.refresh()
    },
    async handleTenantSave() {
      let item = this.dataSource[0]
      if (item.isAudit === 1 && !item.managerList.length) return this.$message.error('解锁需审核时，审核人不能为空')
      let { code, msg } = await TenantSave([...this.dataSource])

      if (code === 90001) {
        Modal.confirm({
          title: '提示',
          content: msg,
          cancelText: '暂不开通',
          okText: '去开通',
          onCancel: () => {
            this.$refs.table.refresh()
          },
          onOk: () => {
            this.$router.push({
              path: '/system/paySettings',
              query: {
                titleKey: 'onlinePayment'
              }
            })
          },
        })
      } else if (code === 0) {
        this.$message.success('保存成功')
      }
    },
  },
  created() {
    this.GetUserList()
  },
  mounted() { },
}
</script>
<style lang="less" scoped>
.title {
  font-size: 16px;
  font-weight: bold;
  padding: 10px 0;
}

.tip {
  padding: 10px 0;
}

.inline {
  display: flex;
  align-items: center;
}

.input {
  width: 200px;
  margin-right: 10px;
}

.table-item {
  display: flex;
  align-items: center;
  margin-top: 5px;

  .label {
    flex-shrink: 0;
  }
}
</style>
